<template>
  <div class="chart" >
  </div>
</template>

<style scoped>
  .chart {

    height: 220px;
    width: 100%;
  }

</style>

<script>

  import * as echarts from 'echarts'


  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {

    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          tooltip: { // 悬停指示
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },

          color: ['#EDECFE', '#A3A1FB'],

          series: [
            {

              type: 'pie',
              radius: ['60%', '70%'],
              avoidLabelOverlap: false,

              label: {
                normal: {
                  show: true,
                  fontSize: '18',
                  position: 'center',
                  formatter: '{d}%\n\n Saved'
                },
                emphasis: {
                  show: true, //文字至于中间时，这里需为true
                  textStyle: { //设置文字样式
                    fontSize: '12',
                    color: "#333"
                  }
                }
              },
              data: [
                {value: 1048, name: '未收入'},
                {value: 735, name: '已收入'},

              ]
            }
          ]
        })
      }
    }
  }
</script>
